<template>
  <a-card class="general-card" style="padding-top: 10px;">
    <a-row style="padding-top: 20px;">
      <a-col :flex="1">
        <a-form
          ref="queryFormRef"
          label-align="left"
          :model="queryModel"
          :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }"
        >
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item field="userName" label="用户名">
                <a-input
                  v-model="queryModel.userName"
                  placeholder="请输入用户名"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="phone" label="手机号">
                <a-input
                  v-model="queryModel.phone"
                  placeholder="请输入手机号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="email" label="邮箱">
                <a-input
                  v-model="queryModel.email"
                  placeholder="请输入邮箱"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="postIds" label="职位">
                <post-select v-model="queryModel.postIds" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="roleIds" label="角色">
                <role-select v-model="queryModel.roleIds" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="status" label="状态">
                <a-select
                  v-model="queryModel.status"
                  allow-clear
                  placeholder="请选择"
                >
                  <a-option value="0">正常</a-option>
                  <a-option value="1">冻结</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
      <a-divider style="height: 84px;" type="solid" direction="vertical" />
      <a-col :flex="'86px'" style="text-align: right">
        <a-space direction="vertical" :size="18">
          <a-button type="primary" @click="search">
            <template #icon>
              <icon-search />
            </template>
            {{ $t('table.query.search') }}
          </a-button>
          <a-button @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            {{ $t('table.query.reset') }}
          </a-button>
        </a-space>
      </a-col>
    </a-row>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from 'vue';
import PostSelect from '@/components/business-select/post-select.vue';
import RoleSelect from '@/components/business-select/role-select.vue';

const emits = defineEmits(['search', 'reset']);

const queryFormRef = ref();

const queryModel = ref({});

const search = () => {
  emits('search', queryModel.value);
};

const reset = () => {
  queryFormRef.value.resetFields();
  emits('reset');
};
</script>

<script lang="ts">
export default {
  name: 'UserQueryHeader'
};
</script>

<style scoped lang="less">

</style>